<template>
  <div class="bottom-nav">
    <!-- 循环渲染5个导航项 -->
    <div
      v-for="(item, index) in navList"
      :key="index"
      class="nav-item"
      :class="{ active: currentTab === index, 'center-item': index === 2 }"
      @click="handleTabClick(index)">
      <!-- 所有图标统一尺寸（24px） -->
      <component
        :is="item.iconComponent"
        :theme="currentTab === index ? 'filled' : 'outline'"
        :size="24"
        :fill="getIconColor(index)" />
      <!-- 中间项隐藏文字 -->
      <span v-if="index !== 2" :class="{ active: currentTab === index }">{{
        item.label
      }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { useRouter } from "vue-router"
// 导入IconPark图标（保持风格统一）
import { Home } from "@icon-park/vue-next"
import { ShoppingCart } from "@icon-park/vue-next"
import { Plus } from "@icon-park/vue-next"
import { Message } from "@icon-park/vue-next"
import { User } from "@icon-park/vue-next"

const currentTab = ref(0)
const router = useRouter()

// 导航配置：关联图标组件 + 路由
const navList = [
  { label: "首页", iconComponent: Home, path: "/" },
  { label: "商城", iconComponent: ShoppingCart, path: "/mall" },
  { label: "发布", iconComponent: Plus, path: "/publish" },
  { label: "消息", iconComponent: Message, path: "/message" },
  { label: "我的", iconComponent: User, path: "/mine" },
]

// 图标颜色逻辑：激活黑、非激活灰，中间项白
const getIconColor = (index) => {
  if (index === 2) return "#FFFFFF" // 中间图标白色（与黄色背景对比）
  return currentTab.value === index ? "#000000" : "#888888"
}

// 点击切换导航 + 路由跳转
const handleTabClick = (index) => {
  currentTab.value = index
  router.push(navList[index].path)
}
</script>

<style scoped>
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #ffffff;
  border-top: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 999;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1; /* 其他项自动拉伸占满宽度 */
  height: 100%;
  cursor: pointer;
}

.nav-item span {
  font-size: 12px;
  color: #888888;
  margin-top: 4px;
}

.nav-item span.active {
  color: #000000;
}

/* 中间项：固定尺寸 + 防止Flex拉伸 + 正圆 */
.center-item {
  flex: 0 0 auto; /* 关键：取消自动拉伸，保持固定宽高 */
  width: 40px; /* 宽高严格相等 → 正圆 */
  height: 40px;
  background: #ffcc00;
  border-radius: 50%; /* 圆形 */
  box-shadow: 0 2px 8px rgba(255, 204, 0, 0.3);
  display: flex;
  align-items: center; /* 图标水平居中 */
  justify-content: center; /* 图标垂直居中 */
  margin-top: 0; /* 与其他项垂直对齐 */
}
</style>
